<template>
  <el-scrollbar>
    <div class="container overview-page">
      <div class="left">
        <div class="boardcast">
          <div class="scroll-wrapper">
            <div class="label">
              <img src="@/assets/img/boardcast.png" alt="" />
              <span>{{$t('AI公告：')}}</span>
            </div>
            <vue3-seamless-scroll :list="boardcastList" class="scroll" direction="left" :hover="true" :singleLine="true"
                                  :step="0.4">
              <div v-for="item in boardcastList">
                <span class="item">{{ item }}</span>
              </div>
            </vue3-seamless-scroll>
          </div>
<!--          <div class="more">-->
<!--            <span>{{$t('查看更多')}}</span>-->
<!--            <i class="iconfont icon-right-1-copy"></i>-->
<!--          </div>-->
        </div>
        <div class="ai">
          <div class="event">
            <div class="title">{{$t('AI分析')}}</div>
            <div class="bottom-part">
              <div class="row">
                <div class="b-l">
                  <div class="sub-title">{{$t('AI事件归类')}}</div>
                  <div class="count">{{typeList.length}}<span>{{$t('类')}}</span></div>
                </div>
                <div class="b-r">
                  <div class="item" v-for="item in typeList" :key="item">{{item}}</div>
                </div>
              </div>
              <div class="row">
                <div class="b-l">
                  <div class="sub-title">{{$t('AI违规统计')}}</div>
                  <div class="count">{{eventTotal}}<span>{{$t('个')}}</span></div>
                </div>
                <div class="b-charts" id="line-charts"></div>
              </div>
            </div>
          </div>
          <div class="report">
            <div class="report-title">
              <span v-if="type == 'day'">{{$t('AI日报')}}</span>
              <span v-if="type == 'week'">{{$t('AI周报')}}</span>
              <i @click="type == 'day' ? type = 'week': type = 'day'" class="iconfont icon-qiehuan"></i></div>
            <div class="content">
              <span v-if="type == 'day'">{{dayReport.reportContent}}</span>
              <span v-if="type == 'week'">{{weekReport.reportContent}}</span>
            </div>
          </div>
        </div>
        <div class="events">
          <div class="title">
            {{$t('事件预警')}}
          </div>
          <div class="row">
            <div class="l">
              <div id="pie-charts"></div>
            </div>
            <div class="r"></div>
          </div>
        </div>
        <div class="videos">
          <div class="title">{{$t('预警视频')}}</div>
          <div class="list">
            <div class="item" v-for="item in videoList" :key="item.id">
              <video muted='muted' :src="item.videoUrl" controls="controls" :poster="item.videoCover"></video>
            </div>

          </div>
        </div>
      </div>
      <div class="right">
        <div class="user">
          <div class="user-info">
            <div class="avatar">
              <img v-if="userInfo && userInfo.userInfo" :src="userInfo.userInfo.headUrl" alt="">
            </div>
            <div class="user-content">
              <div class="name">
                <span v-if="userInfo && userInfo.userInfo">{{userInfo.userInfo.username}}</span>
              </div>
              <div class="memo">{{$t('你好～')}}</div>
            </div>
          </div>
          <div class="btns">
            <div class="btn" @click="openAddMember">
              <div class="icon">
                <i class="iconfont icon-tianjiahaoyou"></i>
              </div>
              <span>{{$t('添加员工')}}</span>
            </div>
          </div>
        </div>
        <div class="device">
          <div class="title">{{$t('设备管理')}}
            <i class="iconfont icon-jiahao" @click="goDevice"></i>
          </div>
          <div class="total">
            <span class="label">{{$t('设备总计')}}</span>
            <div class="number">
              <span class="value">{{deviceCount.deviceCount}}</span>
              <span class="unit">{{$t('个')}}</span>
            </div>
          </div>
          <div class="line-status">
            <div class="item">
              <div class="count">{{deviceCount.onlineCount}}<span>{{$t('个')}}</span></div>
              <div class="status">{{$t('在线')}}</div>
            </div>
            <div class="item">
              <div class="count">{{deviceCount.offlineCount}}<span>{{$t('个')}}</span></div>
              <div class="status">{{$t('离线')}}</div>
            </div>
          </div>
        </div>
        <div class="learn">
          <span class="title">{{$t('学习管理')}}</span>
          <div class="total">
            <span class="label">{{$t('学习总计')}}</span>
            <div class="number">
              <span class="value">{{studyCount.studyCount}}</span>
              <span class="unit">{{$t('个')}}</span>
            </div>
          </div>
          <div class="wrapper" v-for="(item, index) in progressData" :key="index">
            <div class="top">
              <span class="sub-title">{{ $t(item.title) }}</span>
              <div class="number">
                <span class="value">{{ item.total }}</span>
                <span>{{$t('个')}}</span>
              </div>
            </div>
            <div class="progress">
              <div class="active" :style="{
                width: `${item.progress}%`,
              }"></div>
            </div>
            <div class="progress-container">
              <span class="text">{{$t('当前进度')}}</span>
              <span class="value">{{ item.current }}/{{ item.total }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 人员录入 -->
    <AddMember v-if="addMemberDialog" @closeAddMember="closeAddMember"></AddMember>
    <!-- 权限分配 -->
    <AssignPermission v-if="permissionDialog" @closePermission="closePermission"></AssignPermission>
  </el-scrollbar>
</template>

<script>
import AddMember from '@/views/analysis/components/addMember.vue';
import AssignPermission from '@/views/setting/components/editPwd.vue';
var pieChart = null;
import * as echarts from 'echarts';
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import * as api from "@/api";
import {mapState, mapGetters, mapActions} from 'vuex';
import {getVideoPage} from "@/api";
import dayjs from 'dayjs';

export default {
  name: "index",
  data() {
    return {
      addMemberDialog: false,
      permissionDialog: false,
      boardcastList: [],
      progressData: [
        { title: "视频学习", current: 0, total: 0, progress: 0 },
        { title: "文件学习", current: 0, total: 0, progress: 0 },
        { title: "文本学习", current: 0, total: 0, progress: 0 },
      ],
      type: 'day',
      options: [
        {
          title: '今天',
          value: 'day'
        },
        {
          title: '近七天',
          value: 'week'
        },
        {
          title: '一个月',
          value: 'month'
        }
      ],
      deviceCount: {
        deviceCount: 0,
        offlineCount: 0,
        onlineCount: 0,
      },
      studyCount: {
        "studyCount": 0,
        "videoCount": 0,
        "videoCountFinish": 0,
        "fileCount": 0,
        "fileCountFinish": 0,
        "textCount": 0,
        "textCountFinish": 0
      },
      typeList: [],
      eventCount: [],
      eventTotal: 0,
      typeCount: [],
      dayReport: {
        "id": 0,
        "creator": 0,
        "createDate": "2019-08-24T14:15:22.123Z",
        "delFlag": "",
        "reportName": "",
        "reportType": "",
        "reportDate": "",
        "reportContent": "",
        "reportContentEn": "",
        "reportDispose": "",
        "companyId": 0
      },
      weekReport: {
        "id": 0,
        "creator": 0,
        "createDate": "2019-08-24T14:15:22.123Z",
        "delFlag": "",
        "reportName": "",
        "reportType": "",
        "reportDate": "",
        "reportContent": "",
        "reportContentEn": "",
        "reportDispose": "",
        "companyId": 0
      },
      announcement: [],
      videoList: []
    }
  },
  // watch: {
  //   type() {
  //     this.initPieCharts()
  //   }
  // },
  computed: {
    ...mapGetters({
      userInfo: 'system/userInfo', // 映射 allDictionaries 到 dicts
    }),
  },
  components: {
    Vue3SeamlessScroll, AssignPermission, AddMember
  },
  methods: {
    async fetchData() {
      const params = {
        page: 1,
        count: 3,
        // new Date()
        videoDate: dayjs('2025-2-14').format('YYYY-MM-DD')
      };

      try {
        const { data } = await getVideoPage(params);
        if (data.code === 0 && data.data) {
          this.videoList = data.data.records;
        }
      } catch (error) {
        console.error('Error fetching videos:', error);
      }
    },
    async wnAnnouncement() {
      try {
        const {data} = await api.wnAnnouncement({
          page: 1,
          count: 10
        });
        if (!data.code && data.data) {
          this.announcement = data.data.records
          let arr  = this.announcement.map(item => (item.annoTitle ? item.annoTitle + '：': '') + item.annoContent + ' ')
          this.boardcastList = arr.concat(arr)
        }
      } catch (e) {
        console.log(e)
      }
    },
    async getDayReport() {
      try {
        const {data} = await api.lastDailyReport();
        if (!data.code && data.data) {
          this.dayReport = data.data
        }
      } catch (e) {
        console.log(e)
      }
    },
    async getWeekReport() {
      try {
        const {data} = await api.lastWeeklyReport();
        if (!data.code && data.data) {
          this.weekReport = data.data
        }
      } catch (e) {
        console.log(e)
      }
    },
    async eventTypeStatistics() {
      try {
        const {data} = await api.eventTypeStatistics();
        if (!data.code) {
          this.typeCount = data.data
          this.initPieCharts(true)
        }
      } catch (e) {
        console.log(e)
      }
    },
    async weekEventStatistics() {
      try {
        const {data} = await api.weekEventStatistics();
        if (!data.code) {
          this.eventCount = data.data
          let count = 0
          this.eventCount.forEach(item => {
            item.seriesData.forEach(o => {
              count += o.eventCount
            })
          })
          this.eventTotal = count;
          this.initLineCharts();
        }
      } catch (e) {
        console.log(e)
      }
    },
    async deviceStatusStatistics() {
      try {
        const {data} = await api.deviceStatusStatistics();
        if (!data.code) {
          this.deviceCount = data.data
        }
      } catch (e) {
        console.log(e)
      }
    },
    async eventTypeList() {
      try {
        const {data} = await api.eventTypeList();
        if (!data.code) {
          this.typeList = data.data
        }
      } catch (e) {
        console.log(e)
      }
    },

    async studyStatistics() {
      try {
        const {data} = await api.studyStatistics();
        if (!data.code) {
          if (data.data) {
            this.studyCount = data.data
            this.progressData = [
              { title: "视频学习", current: this.studyCount.videoCountFinish + 1, total: this.studyCount.videoCount + 2, progress: 0 },
              { title: "文件学习", current: this.studyCount.fileCountFinish, total: this.studyCount.fileCount, progress: 0 },
              { title: "文本学习", current: this.studyCount.textCountFinish, total: this.studyCount.textCount, progress: 0 }
            ]
            this.progressData.forEach((item, index) => {
              const progress = item.total ? (item.current / item.total) * 100: 0;
              this.progressData[index].progress = progress
            });
          }
        }
      } catch (e) {
        console.log(e)
      }
    },
    openAddMember() {
        this.addMemberDialog = true;
    },
    closeAddMember() {
        this.addMemberDialog = false;
    },
    closePermission() {
      this.permissionDialog = false;
    },
    openPermission() {
      this.permissionDialog = true;
    },
    goDevice() {
      this.$router.push({
        name: 'Device'
      })
    },
    initLineCharts() {
      // {
      //   "seriesName": "吸烟",
      //     "seriesData": [
      //   {
      //     "eventDate": "2025-02-13",
      //     "eventCount": 2,
      //     "eventName": "吸烟"
      //   },
      //   {
      //     "eventDate": "2025-02-14",
      //     "eventCount": 18,
      //     "eventName": "吸烟"
      //   }
      // ]
      // }
      let list = this.eventCount;
      let axis = []
      if (this.eventCount[0]) {
        axis = this.eventCount[0].seriesData.map(item => item.eventDate)
      }
      let color = ['rgba(30, 200, 98, 1)','rgba(255, 172, 163, 1)' ,'rgba(255, 241, 151, 1)']
      var myChart = echarts.init(document.getElementById('line-charts'));
      let option = {
        tooltip: {
          trigger: 'axis',
          showContent: true,
        },
        grid: {
          top: '5',
          bottom: '0%',
          left: '40',
          right: '40',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: axis,
          boundaryGap: false,
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#666',
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 12,
              color: 'rgba(234, 234, 234, 1)',
              fontFamily: 'PingFang SC',
              lineHeight: 24
            }
          },
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
            lineStyle: {
              color: '#666',
            }
          },
          splitLine: {
            lineStyle: {
              color: '#444',
              type: 'dashed'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 12,
              color: 'rgba(234, 234, 234, 1)',
              fontFamily: 'PingFang SC',
              lineHeight: 24
            }
          },
        },
        series: []
      }
      list.forEach((item, idx) => {
        option.series.push( {
          name: item.seriesName,
          color: color[idx],
          data: item.seriesData.map(o => o.eventCount),
          type: 'line',
          smooth: true,
          lineStyle: {
            width: 4,
          },
          symbol: 'emptyCircle',
          showSymbol: true,
          symbolSize: 8,
        },)
      })
      myChart.setOption(option);
    },
    initPieCharts() {
      function getRandomHSL() {
        const h = Math.floor(Math.random() * 360); // 色相 (0-360)
        const s = Math.floor(Math.random() * 30 + 70); // 饱和度 (70-100)
        const l = Math.floor(Math.random() * 30 + 50); // 亮度 (50-80)
        return `hsl(${h}, ${s}%, ${l}%)`;
      }

      function getSimilarHSL(baseColor, deltaH = 30) {
        const [h, s, l] = baseColor.match(/\d+/g).map(Number); // 提取 HSL 值
        const newH = (h + Math.floor(Math.random() * deltaH * 2) - deltaH) % 360; // 调整色相
        return `hsl(${newH}, ${s}%, ${l}%)`;
      }


      pieChart = echarts.init(document.getElementById('pie-charts'));
      let option = {
        tooltip: {
          trigger: 'item'
        },
        grid: {
          top: '5',
          bottom: '0%',
          left: '10',
          right: '30%',
          containLabel: true
        },
        legend: {
          orient: 'vertical',
          right: 'right',
          textStyle: {
            fontSize: 16,
            color: 'rgba(255, 255, 255, 1)',
            fontFamily: 'PingFang SC',
            lineHeight: 20
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            data: [],
            label: {
              color: 'inherit',
              formatter: (obj) => {
                let color = obj.data.color
                return `{${color}|${obj.value}%}\n{${color}_name|${obj.name}}`
              },
              rich: {},
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,

            },
            labelLine: {
              length: 15,
              smooth: true
            },
            // emphasis: {
            //   itemStyle: {
            //     shadowBlur: 10,
            //     shadowOffsetX: 0,
            //     shadowColor: 'rgba(0, 0, 0, 0.5)'
            //   }
            // }
          }
        ]
      }
      this.typeCount.forEach((item, idx) => {
        const baseColor = getRandomHSL(); // 基准颜色
        const colorStart = baseColor; // 起始颜色
        const colorEnd = getSimilarHSL(baseColor, 30); // 相近的结束颜色
        option.series[0].data.push({
          value: item.num,
          color: 'color' + idx,
          name: item.label,
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              r: 0,
              colorStops: [{
                offset: 0, color: colorStart // 0% 处的颜色
              }, {
                offset: 1, color: colorEnd // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          }
        })
        option.series[0].label.rich[`color${idx}`] = {
          fontSize: 24,
          color: baseColor,
          fontFamily: 'PingFang SC',
          textShadowColor: 'rgba(0,0,0,0.8)',
          textShadowBlur: 3
        }
        option.series[0].label.rich[`color${idx}_name`] = {
          fontSize: 12,
          lineHeight: 30,
          color: baseColor,
          fontFamily: 'PingFang SC',
          textShadowColor: 'rgba(0,0,0,0.8)',
          textShadowBlur: 3
        }

      })
      pieChart.setOption(option);
    }
  },
  mounted() {
    this.getDayReport();
    this.getWeekReport()
    this.deviceStatusStatistics()
    this.studyStatistics()
    this.eventTypeList();
    this.weekEventStatistics()
    this.eventTypeStatistics();
    this.wnAnnouncement()
    this.fetchData()
  },
}
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  overflow: hidden;
  margin-bottom: 40px;
  padding-right: 60px;
  box-sizing: border-box;

  .title {
    font-weight: 500;
    font-size: 24px;
    color: #FFFFFF;
    line-height: 38px;
  }

  .left {
    float: left;
    padding-left: 60px;
    box-sizing: border-box;
    width: calc(100vw - 80px - 453px);

    .boardcast {
      width: 100%;
      height: 22px;
      background: #181818;
      border-radius: 16px 16px 16px 16px;
      margin-bottom: 30px;
      padding: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;

      .scroll-wrapper {
        width: 100%;
        display: inline-flex;
        align-items: center;

        .label {
          display: inline-flex;
          align-items: center;
          white-space: nowrap;

          img {
            height: 27px;
          }

          span {
            font-size: 16px;
            color: #FFFFFF;
          }
        }

        .scroll {
          width: 100%;
          overflow: hidden;

          .item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 3px;
            color: #DFDFDF;
            margin-right: 20px;
          }
        }
      }

      .more {
        display: inline-flex;
        align-items: center;
        cursor: pointer;
        font-weight: 400;
        font-size: 16px;
        color: #DFDFDF;

        span {
          color: #dfdfdf;
        }

        i {
          font-size: 10px;
          margin-left: 5px;
        }
      }
    }

    .ai {
      width: 100%;
      background: #181818;
      border-radius: 32px 32px 32px 32px;
      padding: 20px;
      padding-left: 40px;
      margin-bottom: 30px;
      overflow: hidden;
      box-sizing: border-box;
      .event {
        width: calc(100% - 469px - 50px);
        float: left;

        .title {
          margin-bottom: 50px;
        }

        .bottom-part {
          width: 100%;

          .row {
            width: 100%;
            @include clear;
            margin-bottom: 60px;

            &:last-child {
              margin-bottom: 0px;
            }
          }

          .b-l {
            float: left;
            width: 200px;
            text-align: center;
            margin-right: 40px;

            .sub-title {
              font-weight: 500;
              font-size: 16px;
              color: #FFFFFF;
              margin-bottom: 20px;
              line-height: 20px;
            }

            .count {
              font-weight: 500;
              font-size: 40px;
              color: $color;

              span {
                font-size: 16px;
              }
            }
          }

          .b-r {
            width: 456px;
            float: left;

            .item {
              float: left;
              width: 102px;
              height: 32px;
              background: #505050;
              border-radius: 8px 8px 8px 8px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-weight: 400;
              font-size: 12px;
              color: #EAEAEA;
              margin-right: 16px;
              margin-bottom: 16px;

              &:nth-child(4n) {
                margin-right: 0px;
              }
            }
          }

          .b-charts {
            width: 516px;
            margin-left: - 30px;
            height: 200px;
            float: left;
          }
        }
      }

      .report {
        float: right;
        width: 469px;
        min-height: 445px;
        background: #303F2E;
        border-radius: 24px 24px 24px 24px;
        box-sizing: border-box;
        padding: 20px;

        .report-title {
          width: 100%;
          font-weight: 500;
          font-size: 18px;
          color: $color;
          height: 20px;
          margin-bottom: 12px;
          display: flex;
          align-items: center;

          i {
            font-size: 18px;
            margin-left: 10px;
            cursor: pointer;
          }
        }

        .content {
          width: 100%;
          box-sizing: border-box;
          font-weight: 400;
          font-size: 16px;
          color: #D8D8D8;
          line-height: 22px;
        }
      }
    }

    .events {
      width: 100%;
      box-sizing: border-box;
      background: #181818;
      border-radius: 32px 32px 32px 32px;
      padding: 20px;
      padding-left: 40px;
      margin-bottom: 30px;

      .title {
        position: relative;

        .segmented {
          position: absolute;
          right: 0px;
          top: 0px;
        }
      }

      .row {
        width: 100%;
        @include clear;

        .l {
          width: 700px;
          height: 400px;
          padding-top: 50px;

          margin: 0 auto;

          #pie-charts {
            width: 100%;
            height: 100%;
          }
        }

        .r {
          float: left;
        }
      }

    }

    .videos {
      width: 100%;

      background: #181818;
      border-radius: 32px 32px 32px 32px;
      padding: 20px;
      box-sizing: border-box;
      .list {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 40px;


        .item {
          width: 295px;
          height: 162px;
          background: #363636;
          border-radius: 32px 32px 32px 32px;
          margin-right: 70px;
          overflow: hidden;
          box-shadow: 0 8px 16px 0 rgba(#363636, 0.3);
          video{
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
          }
          &:last-child {
            margin-right: 0px;
          }
        }
      }
    }
  }

  .right {
    float: right;
    width: 450px;
    .user {
      width: 450px;

      background: #181818;
      border-radius: 32px 32px 32px 32px;
      padding: 40px;
      margin-bottom: 30px;
      box-sizing: border-box;

      .user-info {
        width: 100%;
        @include clear;

        .avatar {
          float: left;
          width: 116px;
          height: 116px;
          border-radius: 50%;
          background: #999;
          overflow: hidden;
          img{
            @include fit(cover);
          }
        }

        .user-content {
          float: left;
          flex-wrap: wrap;
          height: 116px;
          margin-left: 30px;
          display: flex;
          align-content: center;
          align-items: center;

          .name {
            width: 100%;
            font-weight: 500;
            font-size: 28px;
            color: #FFFFFF;
            margin-bottom: 20px;
          }

          .memo {
            width: 100%;
            font-weight: 500;
            font-size: 18px;
            color: #FFFFFF;
          }
        }
      }

      .btns {
        display: flex;
        width: 100%;
        justify-content: space-between;

        .btn {
          width: 176px;
          height: 60px;
          background: #303F2E;
          border-radius: 32px 32px 32px 32px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 45px;
          cursor: pointer;
          transition: 0.3s ease;

          .icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: $color;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 16px;
            color: #fff;
            transition: 0.3s ease;

            i {
              font-size: 18px;
            }
          }

          span {
            font-weight: 400;
            font-size: 16px;
            color: #FFFFFF;
            transition: 0.3s ease;
          }

          &:hover {
            background-color: #fff;

            .icon {
              background-color: $color;
            }

            span {
              color: $color;
            }
          }
        }
      }
    }

    .device {
      width: 100%;
      background: #181818;
      border-radius: 32px 32px 32px 32px;
      padding: 20px;
      margin-bottom: 30px;
      padding-bottom: 40px;
      box-sizing: border-box;
      .title {
        position: relative;

        .iconfont {
          font-size: 30px;
          color: rgba(223, 223, 223, 1);
          cursor: pointer;
          position: absolute;
          right: 0px;
          top: 0px;
          transition: 0.3s ease;

          &:hover {
            color: $color;
          }
        }
      }

      .total {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 30px;
        margin-top: 16px;

        .label {
          font-size: 16px;
          color: #FFFFFF;
          margin-bottom: 10px;
        }

        .number {
          font-weight: 500;
          font-size: 40px;
          color: #39EA88;

          .value {
            font-size: 40px;
          }

          .unit {
            font-size: 16px;
          }
        }
      }

      .line-status {
        width: 100%;
        display: flex;
        justify-items: center;

        .item {

          width: 200px;

          .count {
            text-align: center;
            width: 100%;
            font-weight: 500;
            font-size: 30px;
            color: #FFFFFF;

            span {
              font-size: 14px;
              font-weight: 400;
            }
          }

          .status {
            text-align: center;
            width: 100%;
            font-weight: 500;
            font-size: 16px;
            color: #FFFFFF;
            margin-top: 10px;
          }
        }
      }
    }

    .learn {
      width: 100%;
      height: 793px;
      background: #181818;
      border-radius: 32px 32px 32px 32px;
      padding: 20px;
      box-sizing: border-box;

      .total {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 60px;
        margin-top: 16px;

        .label {
          font-size: 16px;
          color: #FFFFFF;
          margin-bottom: 10px;
        }

        .number {
          font-weight: 500;
          font-size: 40px;
          color: #39EA88;

          .value {
            font-size: 40px;
          }

          .unit {
            font-size: 16px;
          }
        }
      }

      .wrapper {
        margin-bottom: 70px;

        .top {
          display: flex;
          align-items: center;
          margin-bottom: 20px;

          .sub-title {
            font-size: 16px;
            color: #FFFFFF;
            font-weight: 500;
          }

          .number {
            font-weight: 500;
            color: #FFFFFF;
            margin-left: 28px;

            .value {
              font-size: 30px;
            }
          }

        }

        .progress {
          width: 393px;
          height: 18px;
          background: #030503;
          border-radius: 10px;
          position: relative;

          .active {
            height: 10px;
            background: #39EA88;
            border-radius: 10px;
            position: absolute;
            top: 4px;
            left: 4px;
            transition: 1.2s ease;
          }
        }

        .progress-container {
          margin-top: 12px;

          .text {
            font-size: 12px;
            color: #FFFFFF;
          }

          .value {
            font-size: 14px;
            color: #FFFFFF;
            margin-left: 14px;
          }
        }
      }
    }
  }
}
</style>
